<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style class="cp-pen-styles">
        body {
        background-color: #e3fbff;
    }

    .center {
        margin: 100px auto;
        width: 30px;
    }

    /* The element to hover over */
    .qs {
        background-color: #02bdda;
        border-radius: 16px;
        color: #e3fbff;
        cursor: default;
        display: inline-block;
        font-family: 'Helvetica',sans-serif;
        font-size: 18px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        position: relative;
        text-align: center;
        width: 30px;
    }
    .qs .popover {
        background-color: #264d7ad9;
        border-radius: 5px;
        bottom: 42px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
        color: #fff;
        display: block;
        font-size: 12px;
        font-family: 'Helvetica',sans-serif;
        left: -95px;
        padding: 7px 10px;
        position: absolute;
        width: 200px;
        line-height: 16px;
        z-index: 4;
    }
    .qs .popover:before {
        border-top: 7px solid #264d7ad9;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        bottom: -6px;
        content: '';
        display: block;
        left: 50%;
        margin-left: -7px;
        position: absolute;
    }
    .qs:hover .popover {
        display: block;
        -webkit-animation: fade-in .3s linear 1, move-up .3s linear 1;
        -moz-animation: fade-in .3s linear 1, move-up .3s linear 1;
        -ms-animation: fade-in .3s linear 1, move-up .3s linear 1;
    }

    @-webkit-keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @-moz-keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @-ms-keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @-webkit-keyframes move-up {
        from {
            bottom: 30px;
        }
        to {
            bottom: 42px;
        }
    }
    @-moz-keyframes move-up {
        from {
            bottom: 30px;
        }
        to {
            bottom: 42px;
        }
    }
    @-ms-keyframes move-up {
        from {
            bottom: 30px;
        }
        to {
            bottom: 42px;
        }
    }
    </style></head><body>
<div class="center">
    <span class="qs">!<span class="popover above">你啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊，啊啊啊啊啊啊啊啊啊，啊啊啊啊啊。
	哈哈哈哈哈哈哈哈哈。
	你好！</span></span>
</div>
</body>
</html>